<template>
  <div class="defalutloadmore">
    <div class="defalutloadmore-frame">
      <div class="defalutloadmore-panel" v-if="loadType == 1">
        <span style="margin-top: -0.1rem">Slide up to load more</span>
      </div>
      <div class="defalutloadmore-panel" v-if="loadType == 2">
        <van-loading vertical color="#E38CFF" size="1rem"></van-loading>
        <span style="margin-left: 0.5rem">Loading...</span>
      </div>
      <div class="defalutloadmore-panel" v-if="loadType == 3 && !hideTips">
        <span style="margin-top: -0.1rem">All loaded</span>
      </div>
      <div class="defalutloadmore-panel" v-if="loadType == 4">
        <Nodata />
      </div>
      <div
        class="defalutloadmore-panel"
        v-if="loadType == 5"
        @click="clickMore"
      >
        <span style="margin-top: -0.4rem; color: #1989fa"
          >Click to load more</span
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "defalutLoadMore",
  props: {
    loadType: {
      type: Number,
      default: 3,
    },
    //是否隐藏提示语
    hideTips: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    //点击加载更多
    clickMore() {
      this.$emit("clickMore");
    },
  },
};
</script>
<style lang="less" scoped>
@import "./loadmore.less";
</style>